<template>
  <grid-layout
    v-model:layout="layoutLeft"
    :col-num="4"
    :row-height="50"
    :is-draggable="true"
    :is-resizable="true"
    :is-mirrored="false"
    :vertical-compact="true"
    :margin="[10, 10]"
    :use-css-transforms="true"
    ref="gridRef"
  >
    <grid-item
      v-for="item in layout"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :key="item.i"
    >
      <div class="left_layout_item">
        <div class="del_btn" @click="deleteGrid(item.i)">删</div>
        <span>{{ item.i }}</span>
      </div>
    </grid-item>
  </grid-layout>
</template>
<script setup>
const layout = ref([
  { i: "1", x: 0, y: 0, w: 2, h: 2 },
  { i: "2", x: 2, y: 0, w: 2, h: 2 },
  { i: "3", x: 0, y: 0, w: 2, h: 2 },
  { i: "4", x: 2, y: 0, w: 2, h: 2 },
]);
</script>
<style scoped lang="scss"></style>
